<div class="heading">Data
  <div ng-if="facets" id="facet-tabs" class="tabs"
       ng-mouseover="carousel($event);" ng-mouseleave="clearCarousel();">
    <ul>
      <li ng-repeat="f in facets"
          ng-class="{selected: facet == f}">
        <a ng-click="setFacet(f)" href="">{{f}}</a>
      </li>
    </ul>
  </div>
</div>

<div class="dataTable">
  <table>
    <tbody>
      <tr ng-repeat="column in transposedData track by $index">
        <td ng-repeat="row in column track by $index" ng-class="{schema: $index == 0, raw: row.raw(), derived: !row.raw(), odd: $odd && $index > 0, even: $even && $index > 0}" vde-draggable vde-field="row">
          {{row.name || row}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

<div class="inner paging">
  <p class="buttons">
    <a ng-click="prevPage()" ng-class="{enabled: page > 0}" class="prev">Previous</a>
    <a ng-click="nextPage()" ng-class="{enabled: page+1 < size/limit}" class="next">Next</a>
  </p>

  <p>{{page*limit+1 | number:0}}–{{ (size > page*limit+limit) ? page*limit+limit : size | number:0}} of {{size | number:0}} <span ng-show="facet">(from {{fullSize | number:0}})</span></p>
</div>

<br clear="all" />

<div ng-repeat="(name, stats) in statsTransforms">
  <div class="inner paging">
    Stats: {{name}}
  </div>
  <div class="dataTable">
    <table>
      <tr ng-repeat="(statName, statInfo) in stats">
        <td class="schema derived" vde-draggable vde-field="statInfo.field">{{statName}}</td><td class="odd">{{statInfo.value}}</td>
      </tr>
    </table>
  </div>
</div>

<br clear="all" />